<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bigTable-Test</title>
<script type="text/javascript" src="../src/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../src/template.js"></script>
<script type="text/javascript" src="../src/jquery.form.ui.all.1.0.min.js"></script>
<script type="text/javascript" src="../src/jquery.extGrid.debug.js"></script>
<script type="text/javascript" src="../src/jquery.extGrid.edit.js"></script>
<script type="text/javascript" src="../src/jquery.extgrid.responsive.min.js"></script>
<script type="text/javascript" src="../src/datepicker/WdatePicker.js"></script>
<link href="../src/css/grid.debug.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.datagrid-row-single { background:#FDAC88};
.edit-cell .form-checkbox-ui .ui-form-input { text-align:center;}
.edit-cell .ui-form-checkbox  { float:none;}
</style>
</head>

<body>
<div style=" width:80%; height:500px;" id="tab"></div>
<div id="form"></div>
<script type="text/javascript">
function getData(){
	var rows = [];
	for(var i=1; i<=500; i++){
		var price1=1;
		var price2=1;
		var price3=1;
		var price4=1;
		var price5=1;
		var price6=1;
		var price7=1;
		var price8=1;
		var price9=1;
		var price10=1;
		var price11=1;
		var price12=1;
		var price13=1;
		var price14=1;
		var price15=1;
		var price16=1;
		var price17=1;
		var price18=1;
		var price19=1;
		var price20=1;
		var price21=1;
		var price22=1;
		var price23=1;
		var price24=1;
		var price25=1;
		var price26=1;
		var price27=1;
		var price28=1;
		var price29=1;
		var price30=1;
		var price31=1;
		var price32=1;
		var price33=1;
		var price34=1;
		var price35=1;
		var price36=1;
		var price37=1;
		var price38=1;
		var price39=1;
		var price40=1;
		var price41=1;
		var price42=1;
		var price43=1;
		var price44=1;
		var price45=1;
		var price46=1;
		var price47=1;
		var price48=1;
		var price49=1;
		var price50=1;
	 
		rows.push({
			price1: price1,
			price2: price2,
			price3: price3,
			price4: price1,
			price5: price1,
			price6: price1,
			price7: price1,
			price8: price1,
			price9: price1,
			price10: price1,
			price11: price1,
			price12: price1,
			price13: price1,
			price14: price1,
			price15: price1,
			price16: price1,
			price17: price1,
			price18: price1,
			price19: price1,
			price20: price1,
			price21: price1,
			price22: price1,
			price23: price1,
			price24: price1,
			price25: price1,
			price26: price1,
			price27: price1,
			price28: price1,
			price29: price1,
			price30: price1,
			price31: price1,
			price32: price1,
			price33: price1,
			price34: price1,
			price35: price1,
			price36: price1,
			price37: price1,
			price38: price1,
			price39: price1,
			price40: price1,
			price41: price1,
			price42: price1,
			price43: price1,
			price44: price1,
			price45: price1,
			price46: price1,
			price47: price1,
			price48: price1,
			price49: price1,
			price50: price1,
			allprice: price1+price2+price3+price4+price5+price6+price7+price8+price9+price10
			+price11+price12+price13+price14+price15+price16+price17+price18+price19+price20
			+price21+price22+price23+price24+price25+price26+price27+price28+price29+price30
			+price31+price32+price33+price34+price35+price36+price37+price38+price39+price40
			+price41+price42+price43+price44+price45+price46+price47+price48+price49+price50
		});
	}
	return rows;
}
var grid = $("#tab").extgrid({
	pageSize:500,
	lockRows : [0,1,2,3],
	lockColumns:['price1','price2','price3','price4','price5','price6','allprice'],
	data:getData(),
	toolBars : [{text:'新增一行',callBack:function(){
		grid.addRow({});
	}}],
	columns : [
		{field:'price1',width:50},
		{field:'price2',width:50},
		{field:'price3',width:50},
		{field:'price4',width:50},
		{field:'price5',width:50},
		{field:'price6',width:50},
		{field:'allprice',width:50},
		{field:'price7', editor:{type:'text'},width:60},
		{field:'price8', editor:{type:'text'},width:60},
		{field:'price9', editor:{type:'text'},width:60},
		{field:'price10',editor:{type:'text'},width:60},
		{field:'price11',editor:{type:'text'},width:60},
		{field:'price12',editor:{type:'text'},width:60},
		{field:'price13',editor:{type:'text'},width:60},
		{field:'price14',editor:{type:'text'},width:60},
		{field:'price15',editor:{type:'text'},width:60},
		{field:'price16',editor:{type:'text'},width:60},
		{field:'price17',editor:{type:'text'},width:60},
		{field:'price18',editor:{type:'text'},width:60},
		{field:'price19',editor:{type:'text'},width:60},
		{field:'price20',editor:{type:'text'},width:60},
		{field:'price21',editor:{type:'text'},width:60},
		{field:'price22',editor:{type:'text'},width:60},
		{field:'price23',editor:{type:'text'},width:60},
		{field:'price24',editor:{type:'text'},width:60},
		{field:'price25',editor:{type:'text'},width:60},
		{field:'price26',editor:{type:'text'},width:60},
		{field:'price27',editor:{type:'text'},width:60},
		{field:'price28',editor:{type:'text'},width:60},
		{field:'price29',editor:{type:'text'},width:60},
		{field:'price30',editor:{type:'text'},width:60},
		{field:'price31',editor:{type:'text'},width:60},
		{field:'price32',editor:{type:'text'},width:60},
		{field:'price33',editor:{type:'text'},width:60},
		{field:'price34',editor:{type:'text'},width:60},
		{field:'price35',editor:{type:'text'},width:60},
		{field:'price36',editor:{type:'text'},width:60},
		{field:'price37',editor:{type:'text'},width:60},
		{field:'price38',editor:{type:'text'},width:60},
		{field:'price39',editor:{type:'text'},width:60},
		{field:'price40',editor:{type:'text'},width:60},
		{field:'price41',editor:{type:'text'},width:60},
		{field:'price42',editor:{type:'text'},width:60},
		{field:'price43',editor:{type:'text'},width:60},
		{field:'price44',editor:{type:'text'},width:60},
		{field:'price45',editor:{type:'text'},width:60},
		{field:'price46',editor:{type:'text'},width:60},
		{field:'price47',editor:{type:'text'},width:60},
		{field:'price48',editor:{type:'text'},width:60},
		{field:'price49',editor:{type:'text'},width:60},
		{field:'price50',editor:{type:'text'},width:60}
	],
	rowNumbersWidth:24,
	editColumnFit : true ,
	lazyLoadRow : true,
	checkBox:true,
	singleSelect:true,
	responsive : true,
	moveColumns : true,
	title : 'extgird可编辑测试',
	pagination:true
	//,rowStyler:"background:#FFFFCC;color:#990000;"
	});

var activeData = {};
var activeRid = null;
grid.bind("onClickCell",function(cell,rowId,field,value,e){
	//cell.srcElement.onfocus=true;
	//
	var grid = this;
	grid.saveEditCell();
	$(document).unbind("click.editor");
	
	
	//IE有显示的BUG 应该换成以下写法
	setTimeout(function(){
		grid.fireEvent("onScroll");
		grid.editCell(rowId,field);
		grid.getCellEditor(rowId,field).getInput().focus();
	},0);
	//其他写法
	//grid.editRow(rowId);
	
	setTimeout(function(){
		$(document).bind('click.editor',function(){
			grid.saveEditCell();
			$(document).unbind("click.editor");
		});
	},0);
});

grid.bind("onCellEdit",function(t,rid,field,rowData){
	var fValue=this.getFieldValue(rid,field);//获取单元格数据   
	var allprice=this.getFieldValue(rid,'allprice');//获取单元格数据   
 	var newallprice=parseFloat(allprice)+parseFloat(fValue);
 	//alert("rid=="+rid+"\nallprice="+allprice+"\nnewallprice="+newallprice);
	grid.setFieldValue(rid,'allprice',newallprice); //设置单元格数据   
});
</script>

</body>
</html>
